<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    section{
        width: 800px;
        margin: 100px auto;
    }
    section article{
        float: left;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 4px;
    }
    #text-a{
        background-color: black;
        color: white;
    }
    #text-b{
        background-color: blueviolet;
    }
    #text-c{
        background-color: chocolate;
    }
    #text-d{
        background-color: cornflowerblue;
    }
    h1{
        margin: 10px 10px 5px 50px;
    }
    p{
        margin: 12px 50px;
    }
    section:hover article{
        width: 50px;
    }
    section article:hover{
        width: 650px;
        overflow: auto;
    }
</style>
<body>
    <!--
        overflow:visible(默认)溢出部分可见/hidden溢出部分隐藏/auto适当加入滚动条
        overflow-x
        overflow-y
    -->
    <section>
        <article id="text-a">
            <h1>盒子模型</h1>
            <p>
                每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义
                （原文：defined by their respective edges，可能意指容纳、包含、限制等）。
                如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge
                、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
                每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义
                （原文：defined by their respective edges，可能意指容纳、包含、限制等）。
                如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge
                、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
                每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义
                （原文：defined by their respective edges，可能意指容纳、包含、限制等）。
                如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge
                、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
            </p>
        </article>
        <article id="text-b">
            <h1>盒子模型</h1>
            <p>
                每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义
                （原文：defined by their respective edges，可能意指容纳、包含、限制等）。
                如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge
                、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
            </p>
        </article>
        <article id="text-c">
            <h1>盒子模型</h1>
            <p>
                每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义
                （原文：defined by their respective edges，可能意指容纳、包含、限制等）。
                如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge
                、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
            </p>
        </article>
        <article id="text-d">
            <h1>盒子模型</h1>
            <p>
                每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义
                （原文：defined by their respective edges，可能意指容纳、包含、限制等）。
                如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge
                、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
            </p>
        </article>
    </section>
</body>
</html>